<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
           $("div").onclick =  function (){
               click(this.id);
           }
           $("button").onclick = function (e){
               click(this.id);
               e.stopPropagation();
           }
        }
        function $(id){
            return document.getElementById(id);
        }
        function click(obj){
            alert("点击事件触发"+obj);
        }
        function selectImg(){

            let reader = new FileReader();//定义文件读取流对象
            reader.readAsDataURL($("myFile").files[0]);
            reader.onload = function (ev) {
                document.getElementById("faceImg").src = ev.target.result;
            }
        }
        //类
        // function man(name,age){
        //     this.name=name;
        //     this.age=age;
        // }
        // let  x= new man("吴奇隆",40);
        // alert(x.name);

        class man{
            constructor(name,age) {//构造方法
                this.name=name;
                this.age= age;
            }
            speak(){//普通方法
                alert("类中的说方法");
            }
            static work(){//静态方法
                alert("静态的工作方法");
            }
            //toString方法
            //定义toString方法后，打印对象，会调用该方法。类似于java中的toString（）
            toString(){
                return "name="+this.name+"  age= "+this.age;
            }
        }
        let wen = new man("文林挥",25);
        // wen.speak();
        // man.work();
        // alert(wen);

        //数组的克隆
        let array1 = [{name:"001",age:18},{name: "003",age:23}];
        //浅度克隆，array1和array2 是不同的数组，但是数组元素引用同一个对象
        // let array2 = [...array1];
        let array2 = JSON.parse(JSON.stringify(array1));
        // alert(array1==array2);
        // alert( array1[2]==array2[2]);

        //对象的克隆
        let obj = { name: "tang",age:35};
        let tan = {...obj};
        // alert((obj==tan)+"      "+JSON.stringify(tan));   //false

        //速写属性
        let dog= {name:"大黄",age:4};
        //当属性名和属性值一致时，可以直接写属性名
        let people = {name:"杨杨",dog};  //等价于 let people={name:"yy",dog:dog}
        // alert(JSON.stringify(people));  //{"name":"杨杨","dog":{"name":"大黄","age":4}}

        //模板字符串
        var boy = "柯林";
        var birth= 34;
        var str = `姓名： ${boy}   年龄：${birth}`;
        // alert(str);
    </script>
</head>
<body>
    <div id="div" style="width: 100px;height: 80px ;border:1px solid #076FA2">
        <input type="button" value="我的小可爱" id="button">
    </div>
    <aside>
        <img src="../../image/girl/yihan2.JPG" alt="" style="height: 300px;width: 200px" id="faceImg"> <br>
        <input type="file" value="更换图片"   onchange="selectImg()" id="myFile">
    </aside>
</body>
</html>